<template>

        <!--主体-内容-->
        <div >

            <!--搜索-->
            <div style="margin: 10px 0">
                <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="search.username"></el-input>
                <el-input style="width: 200px" placeholder="请输入邮箱" suffix-icon="el-icon-message" v-model="search.email" class="ml-5"></el-input>
                <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position" v-model="search.address" class="ml-5"></el-input>
                <el-button class="ml-5" type="primary"  @click="load">搜索</el-button>
                <el-button type="warning" @click="reset">重置</el-button>
            </div>
            <!--功能区-->
            <div style="margin: 10px 0">

                <el-button type="primary " plain @click="handleAdd">
                    新增 <i class="el-icon-circle-plus-outline"></i>
                </el-button>

                <el-popconfirm
                        class="ml-5"
                        confirm-button-text='确定'
                        cancel-button-text='我再想想'
                        icon="el-icon-info"
                        icon-color="red"
                        title="您确定批量删除这些数据吗？"
                        @confirm="delBatch"
                >
                    <el-button type="danger" slot="reference" plain>批量删除 <i class="el-icon-remove-outline"></i></el-button>
                </el-popconfirm>                                             <!--不显示文件列表     格式           成功的回调函数    -->
                    <el-upload :action="upUrl" :show-file-list="false" accept="xlsx" :on-success="handleExcelImportSuccess" style="display: inline-block">
                        <el-button type="info" plain class="ml-5">导入 <i class="el-icon-bottom"></i></el-button>
                    </el-upload>
                    <el-button type="success" plain @click="exp" class="ml-5">导出 <i class="el-icon-top"></i></el-button>
                    <el-button type="success" plain @click="exportSQL" class="ml-5">导出脚本 <i class="el-icon-top"></i></el-button>
            </div>

            <el-table :data="tableData"
                      border stripe highlight-current-row
                      header-cell-class-name="headerBg"
                      @selection-change="handleSelectionChange"
                      ref="table"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="username" label="用户名" width="140"></el-table-column>
                <el-table-column prop="role" label="角色">
                    <template slot-scope="scope">
                        <span v-if="scope.row.role === 'ROLE_ADMIN'">管理员</span>
                        <span v-if="scope.row.role === 'ROLE_USER'">普通用户</span>
                    </template>

                </el-table-column>
                <el-table-column prop="nickname" label="昵称" width="120"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column label="操作"  width="200" align="center">
                    <template slot-scope="scope">
                        <el-button type="success"  plain @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
                        <el-popconfirm
                                class="ml-5"
                                confirm-button-text='确定'
                                cancel-button-text='我再想想'
                                icon="el-icon-info"
                                icon-color="red"
                                title="您确定删除吗？"
                                @confirm="del(scope.row.id)"
                        >
                            <el-button type="danger" slot="reference" plain>删除 <i class="el-icon-remove-outline"></i></el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div style="padding: 10px 0">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="search.pageNum"
                        :page-sizes="[2, 5, 10, 20]"
                        :page-size="search.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
            <!--  弹框-->


            <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%" >
                <el-form label-width="80px" size="small">
                    <el-form-item label="用户名">
                        <el-input v-model="form.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <!--角色-->
                    <el-form-item label="角色">
                        <el-select clearable v-model="form.role" placeholder="请选择角色" style="width: 100%">
                            <!--                                                                   value 绑定-->
                            <el-option v-for="item in roles" :key="item.name" :label="item.name" :value="item.flag"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input v-model="form.nickname" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="form.email" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="form.phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="form.address" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save">确 定</el-button>
                </div>
            </el-dialog>

        </div>

</template>

<script>
import {exportSQLCommon} from '@/js/request.js';
    export default {
        name: "User",
        data(){
            return {
                // tableData: Array(10).fill(item),
                /**分页数据**/
                tableData: [],
                total: 0,
                search:{
                    pageNum: 1,
                    pageSize: 10,
                    username: '',
                    email: '',
                    address: '',


                },

                form: {

                },

                dialogFormVisible: false,
                multipleSelection:[],

                //    角色列表
                roles: []


            }
        },

        computed: {
            upUrl() {

                return window.up + "/user/export"
            }

        },

        created() {
            // 请求分页查询数据
            this.load()
        },
        methods: {


            load() {

                this.request.get("/user/page",{
                    params: this.search
                }).then(res => {
                    this.tableData = res.data.records
                    this.total = res.data.total
                    // this.$message.success("成功")
                })
            //    获取角色列表
                this.request.get("/role").then(res => {
                    this.roles = res.data
                })

            },

            handleSizeChange(pageSize) {
                console.log(pageSize)
                this.search.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {
                console.log(pageNum)
                this.search.pageNum = pageNum
                this.load()
            },

            reset(){
                this.search = {}
            },

            handleAdd() {
                this.dialogFormVisible = true
                this.form = {}
            },

            save() {
                this.request.post("/user", this.form).then(res => {
                    if (res.code === '200') {
                        this.$message.success("保存成功")
                        this.dialogFormVisible = false
                        this.load()

                    } else {
                        this.$message.error("保存失败")
                    }
                })
            },


            handleEdit(row) {
                this.form = row
                this.dialogFormVisible = true
            },

            del(id) {
                this.request.delete("/user/" + id).then(res => {
                    if (res.code === '200') {
                        this.$message.success("删除成功")
                        this.load()
                    } else {
                        this.$message.error("删除失败")
                    }
                })
            },
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val
            },
            delBatch() {
                let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
                this.request.post("/user/del/batch", ids).then(res => {
                    if (res.code === '200') {
                        this.$message.success("批量删除成功")
                        this.load()
                    } else {
                        this.$message.error("批量删除失败")
                    }
                })
            },
            //导出
            exp() {
                window.open(`${window.up}/user/export`)
            },
            //文件上传成功的回调
            handleExcelImportSuccess() {
                this.$message.success("导入成功")
                this.load()
            },


            /**
             * 导出SQL脚本
             * @param e 事件
             */
            async exportSQL(e) {
                // 获取行数据
                const rows = await this.getMultiRows();
                const ids = rows.map(item => item.id);
                exportSQLCommon(e, ids, `${window.up}/user/exportSQL`);
            },


            /**
             * 获取表格选中的行，如未选中，则默认显示未选中提示
             * @returns {Promise<unknown>}
             */
            getMultiRows: function() {
                const rows = this.multipleSelection;
                return new Promise(resolve => {
                    if (!rows || rows.length === 0) {
                        alert('至少勾选一行!');
                    } else {
                        resolve(rows);
                    }
                });
            },
        }
    }
</script>

<style scoped>
    /*表头样式--*/
    >>> .headerBg {
        background: #e1fae5 !important;
    }
</style>
